<template>
    <el-card class="wifi_set_box">
        <div slot="header" class="wifi_set_box_header">
            <span>{{ wifiType }}</span>

            <el-switch v-if="showSwitch" v-model="inValue" v-on="$listeners" v-bind="$attrs"> </el-switch>
        </div>

        <slot></slot>
    </el-card>
</template>

<script>
export default {
    name: 'WiFiSetBox',
    inheritAttrs: false,
    props: {
        wifiType: [String],
        value: {
            type: Boolean,
            require: false
        },
        showSwitch: {
            type: Boolean,
            require: true
        }
    },
    computed: {
        inValue: {
            get: function () {
                return this.value;
            },
            set: function (newValue) {
                this.$emit('input', newValue);
            }
        },

        append() {
            return `${this.wifiNameCurrentLength}/32`;
        }
    }
};
</script>

<style lang="less" scoped>
.wifi_set_box {
    width: 100%;
    background-color: #f9f9f9;

    &_header {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    /deep/.el-card__body {
        .flex_form {
            display: flex;
            flex-wrap: wrap;

            .el-form-item {
                display: flex;
                flex-direction: column;
                align-items: flex-start;

                flex: 1 0 calc(50% - 10px);
                box-sizing: border-box;
                margin: 5px 5px 20px 5px;

                .el-form-item__content {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;

                    .el-select {
                        width: 100%;
                    }
                }
            }

            .no_label {
                .el-form-item__label {
                    color: #f9f9f9;
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                }
            }
        }

        @media (max-width: 888px) {
            .flex_form {
                display: block;
                .no_label {
                    .el-form-item__label {
                        display: none;
                    }
                }
            }
        }
    }
}
</style>
